<script lang="ts">
  let name = "hello astro unocss demo";
  let demo = () => (name = "ssssssssss");
</script>

<div
  ps-10
  h20
  bg-green
  flex
  justify-center
  items-center
  hover:bg-yellow
  my-5
  on:click={demo}
>
  {name}
</div>
<div grid grid-flow-col justify-around my-5>
  <div class="bb" />

  <div class="cc" />
</div>

<style>
  .bb {
    display: flex;
    justify-content: center;
    justify-items: center;
    width: 465px;
    height: 465px;
    background: #f09;
    background-image: linear-gradient(45deg, #3023ae 0%, #f09 100%);
    border-radius: 34% 66% 70% 30% / 30% 55% 45% 70%;
    box-shadow: -10vmin 10vmin 0 rgb(255 255 255 / 7%);
    font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  }

  .cc {
    width: 465px;
    height: 465px;
    background: rgb(189, 140, 169);
    margin-left: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-elevation-medium);
  }
</style>
